import { StyleSheet, Text, View, ScrollView } from 'react-native'
import React from 'react'

const Tabs = (props) => {
  const { current = 0, list, onChange } = props
  // const [current, setCurrent] = useState(props.current || 1)

  const tabItemStyle = (index) => {
    if (index === current) {
      return [styles.tabItem, styles.active]
    }
    return styles.tabItem
  }
  return (
    <View style={styles.container}>
      <ScrollView horizontal={true}>
        <View style={styles.tabs}>
          {
            list.map((item, index) => {
              return (
                <View style={styles.box} key={item.name}>
                  <View style={tabItemStyle(index)}>
                    <Text onPress={() => {
                      if(current === index) return
                      onChange(index)
                    }}>{item.name}</Text>
                  </View>
                  {
                    current === index && <Text style={styles.line}></Text>
                  }
                </View>
              )
            })
          }
        </View>
      </ScrollView>
    </View>
  )
}

export default Tabs

const styles = StyleSheet.create({
  container: {},
  tabs: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'flex-start',
    // backgroundColor: '#fff',
    marginBottom: 5,
    width: '100%'
  },
  tabItem: {
    paddingHorizontal: 20,
    paddingVertical: 10,
    // backgroundColor: 'blue'
  },
  active: {
    // borderBottomWidth: 2,
    // borderColor: 'red',
    // borderStyle: 'solid'
  },
  box: {
    display: 'flex',
    alignItems: 'center'
  },
  line: {
    backgroundColor: 'red',
    height: 3,
    width: '50%',
    // position: 'absolute',
    // bottom: 0,
    // left: '50%',
    // transform: [{translateX: -20}]
  }
})